<template>
    <view>
        <u-grid :col="2" :border="false" v-if="videoList.length">
            <u-grid-item v-for="(video, index) in videoList"
                         :key="index"
                         :index="video.id"
                         :custom-style="{padding:'15rpx 0'}"
            >
                <view class="video-item" @click="videoDetail(video)">
                    <view style="position: relative;">
                        <u-image width="100%" height="240rpx" :src="video.face_img"></u-image>
                        <text class="video-time video-text">时长: {{ video.time }}</text>
                        <text class="video-count video-text">{{ video.play_count }}人付费{{ video.price }}元观看</text>
                    </view>
                    <view>
                        <text class="video-name">{{ $help.xor_enc(video.c_title) }}</text>
                    </view>
                </view>
            </u-grid-item>
        </u-grid>

        <u-empty v-else text="更多视频24小时不间断上传中..." mode="data"></u-empty>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                videoList: [],
                storeData:{
                    code: '',
                    code0: '',
                    out_video: null,
                    pic_type: 'encode_img',
                    score: 1,
                    user_score: 0,
                },

                // 可变动数据
                page:0,
                category_id: 0,
                buyed: 0,
                random_view: 1,
                searchkey: '',
                recommend: 0,
                selltop: 0,


                encode_img: 'encode_img',
                img_cdns: [],
                videos_num: 2,
                price: 0.01,


            };
        },

        created() {
            // this.getVideoList(this.formData());

            // 监听导航页面选中数据
            this.$bus.$on('searchVideo', data => {
                this.searchVideo(data.type, data.value);
            });
        },

        methods: {

            // 获取配置
            getStoreData(value = null) {
                Object.assign(this.storeData, value ? value : uni.getStorageSync('homeStore'));
            },


            // 获取视频列表
            getVideoList(data) {
                this.$api.getVideoList(data).then((res) => {
                    // 接收参数
                    // agent_id, img_cdns, nums, price,  price_day, score, score_day, user_day_text, user_score, yigou
                    // 请求参数
                    // buyed category_id code code0 distinct limit page pic_type random_view recommend selltop

                    let {videos} = res;
                    // 其他属性赋值
                    delete res.videos;
                    for (let item in res) {
                        this.storeData[item] = res[item];
                    }
                    if (this.page == 0) this.videoList = [];
                    if (videos.length) {
                        this.page += 1;
                        // 追加数据
                        this.videoList.push(...videos);
                        // 解密视频封面
                        this.imgDecode(videos);
                    }
                });
            },

            // 搜索视频
            searchVideo(type, value) {
                this.initFormData(type);
                // 0精品热门 1分类  2最新 3关键字 4已购
                switch (type) {
                    case 0:
                        this.getVideoList(this.formData());
                        break;
                    case 1:
                        this.category_id = value; // 分类
                        this.getVideoList(this.formData());
                        break;
                    case 2:
                        break;
                    case 3:
                        this.searchkey = value;
                        this.getVideoList(this.formData());
                        break;
                    case 4:
                        this.buyed = 1;
                        this.getVideoList(this.formData());
                        break;
                    default:
                        break;
                }
            },

            // initFormData 重置
            initFormData(type) {
                if (type != 3) {
                    this.searchkey = '';
                    // 修改搜索框的值
                    this.$bus.$emit('updateSearch', '');
                }
                // 可变动数据
                this.random_view = 1;
                this.buyed = 0;
                this.category_id = 0;
                this.recommend = 0;
                this.selltop = 0;
                this.page = 0;
            },

            // api请求数组组装
            formData(distinct = false) {
                return {
                    code: this.storeData.code,
                    page: this.page + 1,
                    category_id: this.category_id,
                    buyed: this.buyed,
                    random_view: this.random_view,
                    search: this.searchkey,
                    recommend: this.recommend,
                    selltop: this.selltop,
                    pic_type: this.storeData.pic_type,
                    code0: this.storeData.code0,
                    distinct: distinct,
                    limit: 18,
                };
            },

            // 封面视频批量解密
            imgDecode(videoList) {
                let _this = this;
                let cdn = this.storeData.img_cdns;
                videoList.forEach(function (item, index) {
                    // 拼接加密地址
                    let cover = item.videos_num == 2 ? `http://${cdn.img_cdn2.domain}/${item.face_img}` :  `http://${cdn.img_cdn1.domain}/${item.face_img}`;
                    // 解密
                    _this.$help.imgDecode(cover, item.id).then((res) => {
                        let item = _this.videoList.find(item => item.id === res.id);
                        item.face_img = res.src;
                    });
                });
            },

            // 点击视频查看详情
            videoDetail(video) {
                // 传递数据给模态框
                this.$bus.$emit('videoItem', {buyed:this.buyed, video: video});
                console.log('传递给了模态框')
            },

            // 下拉加载追加视频
            appendVideo() {
                console.log('追加视频, 当前页码: ' + this.page)
                this.getVideoList(this.formData(true));
            },

            // 上拉刷新
            refreshVideo() {
                console.log('刷新视频, 当前页码: ' + this.page)
                this.page = 0;
                this.videoList = [];
                this.getVideoList(this.formData());
            }
        }

    }
</script>


<style lang="scss" scoped>
    .video-item {
        padding: 0 10rpx;
        width: 100%;
        .video-cover {
            width: 100%;
            height: 240rpx;
        }
        .video-time{
            position: absolute;
            left: 10rpx;
            top: 5rpx;
        }
        .video-count{
            position: absolute;
            bottom: 10rpx;
            left: 10rpx;
        }
        .video-text {
            color: white;
            font-weight: 500;
            font-size: 20rpx;
        }
        .video-name {
            display: block;
            border: 1px solid #cccc;
            border-radius: 8rpx;
            margin-top: -6rpx;
            height: 104rpx;
            line-height: 48rpx;
            // text-indent: 1em;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
            width: 100%;
            color: black;
			padding:2px;
        }
    }
</style>